<template>
  <div style="background:rgba(245,245,245,1);padding-bottom: 120px;">
    <breadcrumb :navdata="bdname"></breadcrumb>
    <div class="classMienDetail">
      <div class="mienDetailTitle">{{title}}</div>
      <div class="mienDetailTime">{{time}}</div>
      <div class="mienDetailImg" v-html="groupPhoto"></div>
    </div>
  </div>
</template>
<script>
import breadcrumb from "basic/breadcrumb/breadcrumb"
import { bannerClassFindOne } from 'api/getData'
export default {
  name: 'classMienDetail',
  metaInfo: {
    title: '班级风采详情-国科学院', // set a title
    meta: [{                 // set meta
      name: 'keywords',
      content: '班级风采详情-国科学院,在线教育,IT人才培养,IT培训,软件开发培训,编程培训,软件工程师培训班,成都IT培训机构,程序员培训机构'
    }],
  },
  data() {
    return {
      bdname: [
        {
          name: '首页',
          url: '/'
        },
        {
          name: '班级风采',
          url: '/classMien'
        },
        {
          name: '班级风采-详情',
          url: '/classMienDetail'
        }
      ],
      title: '',
      time: '',
      groupPhoto: '',
      contentTxt: ''
    }
  },
  created() {
    bannerClassFindOne(this.$route.query.id).then(res => {
      this.title = res.formalClass.title
      if (res.formalClass.title.length > 50) {
        this.bdname[2].name = res.formalClass.title.slice(0, 50) + '...'
      } else {
        this.bdname[2].name = res.formalClass.title
      }
      this.groupPhoto = res.formalClass.groupPhoto
      this.time = this.$moment(res.createdAt).format('YYYY-MM-DD')
    })
  },
  computed: {

  },
  components: {
    breadcrumb
  },
  mounted() {

  },
  methods: {

  },
  watch: {

  }
}

</script>
<style lang="stylus" scoped>
@import '~style/base.styl';

.classMienDetail {
  width: 1200px;
  min-height: 500px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  margin: 0 auto;
  margin-top: 23px;
  padding: 100px;
  box-sizing: border-box;
}

.mienDetailTitle {
  font-size: 26px;
  font-family: MicrosoftYaHei-Bold;
  font-weight: bold;
  color: rgba(32, 32, 32, 1);
  line-height: 46px;
  margin-bottom: 24px;
}

.mienDetailTime {
  font-size: 18px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(118, 118, 118, 1);
  margin-bottom: 60px;
}

.mienDetailImg {
  width: 750px;
  min-height: 560px;
  margin: 0 auto;

  p {
    width: 100%;

    img {
      width: 100%;
      max-width: 750px !important;
      height: 100%;
    }
  }
}

.mienDetailTxt {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(118, 118, 118, 1);
  line-height: 30px;
}
</style>
